<script setup lang="ts">
import { useChannelStore } from '@/stores/channel'
import type { ArticleItem, ArticleResData } from '@/types/data'
import axios from 'axios'
import { ref, watch } from 'vue'
import { onMounted } from 'vue'
// 通过 prop 可以在代码中获取传递过来的 id
// const prop = defineProps<{
//   channelId: number
// }>()

// 通过 pinia 获取频道 id
const store = useChannelStore()
const list = ref<ArticleItem[]>([])

const getData = async () => {
  const res = await axios<ArticleResData>({
    url: 'http://geek.itheima.net/v1_0/articles',
    // params的数据 拼接到 url 末尾
    // url?key=value&key2=value2
    params: {
      // channel_id: prop.channelId, // 频道 id
      channel_id: store.channel, // 频道 id
      timestamp: Date.now() // 时间戳
    }
  })
  console.log(res.data.data.results)
  list.value = res.data.data.results
}

// 发请求根据 id 获取数据
onMounted(() => {
  getData()
})

// 数据改变之后 根据 id 获取数据
watch(
  // () => prop.channelId,
  () => store.channel, // pinia 中的频道 id
  () => {
    getData()
  }
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in list" :key="i.art_id">
      <p class="title">{{ i.title }}</p>
      <img v-for="(item, index) in i.cover.images" :key="index" class="img" :src="item" alt="" />

      <div class="info">
        <span>{{ i.aut_name }}</span>
        <span>{{ i.comm_count }}评论</span>
        <span>{{ i.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
